<template>
	<view style="background-color: rgb(247,247,247);">
		<view class="top_navigation">
			<u-navbar title="首页" :placeholder="true" :bgColor="bgColor" :titleStyle='titleStyle'>
				<view class="u-nav-slot" slot="left" @click="personal">
					<u-icon name="person-delete-fill" size="25" color='#E3F7F0'>
					</u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 服务数据 -->
		<view class="service_data">
			<view class="service_data_text">
				<p class="service_data_text_num">94</p>
				<span>服务分</span>
			</view>
			<view class="service_data_text">
				<p class="service_data_text_num">283.43</p>
				<span>今日流水</span>
			</view>
			<view class="service_data_text">
				<p class="service_data_text_num">10</p>
				<span>接单量</span>
			</view>
			<view class="service_data_text">
				<p class="service_data_text_num">8.5</p>
				<span>在线时长</span>
			</view>
		</view>
		<!-- 功能按钮 -->
		<view class="function">
			<view class="function_btn">
				<u-button customStyle="color:black" icon="list" text="选单" color="rgb(242,242,242)"></u-button>
			</view>
			<view class="function_btn">
				<u-button customStyle="color:black" icon="gift" text="奖励" color="rgb(242,242,242)"></u-button>
			</view>
			<view class="function_btn">
				<u-button customStyle="color:black" icon="map" text="热力图" color="rgb(242,242,242)"></u-button>
			</view>
			<view class="function_btn">
				<u-button customStyle="color:black" text="更多" color="rgb(242,242,242)"></u-button>
			</view>
		</view>
		<!-- 中间内容 -->
		<view class="promote">
			<!-- 标题 -->
			<view class="promote_title">
				<view class="promote_img">
					<u-icon name="file-text-fill" color="#FE5A0B" size="70"></u-icon>
				</view>
				<view class="promote_text">
					<view style="font-size: 20px;font-weight: 700;">如何提升服务分？</view>
					<text>小滴课堂来帮您，快来学习吧</text>
				</view>
			</view>
			<view class="promote_skip">
				<view>去学习</view>
				<view>
					<u-icon name="arrow-right-double" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom_btn">
			<view class="btn_pattern">
				<u-button customStyle="color:white" :text="present" color="rgb(90,97,113)" @click="pattern"></u-button>
			</view>
			<view class="btn_depart">
				<u-button customStyle="color:white" text="点击出车" color="rgb(254,93,14)" @click="pop_Up"></u-button>
			</view>
		</view>
		<view>
			<u-picker :show="show" :columns="columns" @confirm='patternCut'></u-picker>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				bgColor: '#3E4460', //导航栏背景颜色
				titleStyle: { //导航栏字体颜色
					color: '#E3F7F0'
				},
				show: false, //模式点击时弹出
				columns: [ //选项
					['快车', '出租车']
				],
				present: '模式', //当前
			}
		},
		methods: {

			// 模式
			pattern() {
				this.show = true
			},
			// 个人中心
			personal() {
				uni.navigateTo({
					url: ''
				})
			},
			// 模式切换
			patternCut(e) {
				this.show = false,
					this.present = e.value[0]
			},
			// 出车
			pop_Up() {
				if (this.present == "快车") {
					uni.navigateTo({
						url: '../FlashGet/FlashGet'
					})
				} else if (this.present == "出租车") {
					uni.navigateTo({
						url: '../Taxi/Taxi'
					})
				} else {
					uni.showToast({
						title: '请选择模式',
						icon: 'error',
						duration: 2000
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	// 服务数据
	.service_data {
		display: flex;
		width: 90%;
		margin: 0 auto;
		margin-top: 30px;

		.service_data_text {
			flex: 1;
			text-align: center;

			.service_data_text_num {
				font-size: 20px;
				font-weight: 700;
			}
		}
	}

	// 功能按钮
	.function {
		width: 90%;
		margin: 0 auto;
		display: flex;
		Justify-content: space-around;
		margin-top: 30px;

		.function_btn {
			width: 23%;
		}
	}

	// 底部按钮
	.bottom_btn {
		width: 100%;
		height: 60px;
		display: flex;
		Justify-content: center;
		Align-items: center;
		position: absolute;
		bottom: 20px;
		background-color: rgb(62, 65, 83);

		.btn_pattern {
			width: 200rpx;
			margin-right: 10px;
		}

		.btn_depart {
			width: 500rpx;
		}
	}

	// 中间内容
	.promote {
		width: 700rpx;
		height: 150px;
		margin: 0 auto;
		margin-top: 20px;
		border: 1px solid rgb(181, 181, 181);
		border-radius: 10px;
		background-color: white;

		.promote_title {
			width: 100%;
			height: 100px;
			border-bottom: 1px solid rgb(242, 242, 242);
			display: flex;

			.promote_img {
				margin-left: 20px;
				margin-top: 15px;
			}

			.promote_text {
				line-height: 30px;
				margin-top: 20px;
			}

		}

		.promote_skip {
			width: 90%;
			height: 50px;
			margin: 0 auto;
			display: flex;
			Justify-content: space-between;
			Align-items: center;
			font-weight: 700;
		}
	}
</style>
